<style lang="scss" scoped>
    @import './index.scss';
</style>

<template>
  <div>
      <div class="c-head">
        <div class="username">设置新微代理员</div>
      </div>

      <div class="c-body">
        <x-input-item v-model="username"
          class="m-mb-30"
          label="*微代理经销员名称"
          placeholder="填写名字"
          style="margin-top:30px;"/>

        <x-input-item v-model="city"
          class="m-mb-30 cursor"
          label="所在城市"
          placeholder="请选择"
          @click.native="showCity"/>

        <x-input-item class="m-mb-30" v-model="date" label="*管理期限至（默认为商户版本到期日期）" placeholder="2018-12-31 23:59:59"/>
        <button class="up-submit" :disabled="!disabled" @click="submit">生成动态二维码开通子管理员</button>
      </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        username: '',
        city: '',
        date: '2018-12-31 23:59:59'

      }
    },
    computed: {
      disabled () {
        return this.date && this.username
      }
    },
    mounted () {
      console.log(1)
    },
    methods: {
      submit () {
        localStorage.setItem('username', this.username)
        localStorage.setItem('city', this.city)
        localStorage.setItem('date', this.date)
        this.$router.push({
          path: '/wxmanager/authorization'
        })
      },
      showCity () {

      },
      init () {
        this.username = ''
        this.duty = ''
        this.date = ''
      }
    },
    watch: {
      $route (v, v2) {
        if (v.query.id !== v2.query.id) {
          this.init()
        }
      }
    }
  }
</script>
